<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '快递代取',
  },
}
</route>

<template>
  <wd-navbar title="快递代取" left-text="" left-arrow @click-left="handleClickLeft"></wd-navbar>
  <view class="bg">
    <form-item :formData="formItemOne"></form-item>
    <form-item :formData="formItemTwo"></form-item>
    <form-item :formData="formItemThree" :closeFlag="true"></form-item>
    <view class="btn">增加取件</view>
  </view>
  <bottom-money></bottom-money>
</template>

<script setup lang="ts">
const formItemOne = ref([
  {
    formType: 'select',
    formLabel: '送到哪里去',
    formMust: true,
    formValue: '暂无',
    formValueColor: '#808080',
    formBottomBorder: true,
  },
  {
    formType: 'select',
    formLabel: '期望送达',
    formValue: '今日-立即送出',
    formValueColor: '#588FFF',
  },
])
const formItemTwo = ref([
  {
    formType: 'select',
    formLabel: '物品规格',
  },
  {
    formType: 'input',
    formLabel: '取件码',
    formValue: '请输入取件码',
  },
  {
    formType: 'select',
    formLabel: '在哪里取件',
    formValue: '南门菜鸟驿站',
    formValueColor: '#588FFF',
  },
  {
    formType: 'text',
    formLabel: '费用小记',
    formValue: '1.20元',
    formValueColor: '#000',
  },
])
const formItemThree = ref([
  {
    formType: 'select',
    formLabel: '物品规格',
  },
  {
    formType: 'input',
    formLabel: '取件码',
    formValue: '请输入取件码',
  },
  {
    formType: 'select',
    formLabel: '在哪里取件',
    formValue: '东门菜鸟驿站',
    formValueColor: '#588FFF',
  },
  {
    formType: 'text',
    formLabel: '费用小记',
    formValue: '1.20元',
    formValueColor: '#000',
  },
])
const handleClickLeft = () => {
  uni.navigateBack()
}
</script>

<style scoped lang="scss">
.bg {
  height: 100vh;
  padding: 1.63rem 1.38rem;
  background-color: rgba(242, 243, 247, 1);
  .form {
    width: 20.69rem;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 1rem;
    .form-item {
      padding: 1.06rem 0.94rem 1.06rem 0.75rem;
      border-bottom: 0.06rem solid rgba(187, 187, 187, 1);
      .form-item-left {
        .form-item-left-text {
          font-family: SourceHanSansSC-regular;
          font-size: 1rem;
          line-height: 1.44rem;
          color: rgba(0, 0, 0, 1);
          text-align: left;
        }
      }
      .form-item-right {
        .form-item-right-text {
          font-family: SourceHanSansSC-regular;
          font-size: 1rem;
          line-height: 1.44rem;
          color: #808080;
          text-align: left;
        }
      }
    }
  }
  .btn {
    width: 20.69rem;
    height: 2.88rem;
    font-family: SourceHanSansSC-regular;
    font-size: 1rem;
    line-height: 2.88rem;
    color: rgba(255, 255, 255, 1);
    text-align: center;
    background-color: rgba(88, 143, 255, 1);
    border-radius: 1.44rem;
  }
}
</style>
